<div class="main-list" id="main-list">
    <div class="list-wrapper" auto-height>

        <span loading="model.loading"></span>

        <div class="list-wrapper" ng-show="!model.loading">
            <ul class="full-list" offset-top="100">
                <li ng-repeat="privilege in model.privileges" ng-class="{'active': model.selectedPrivilege.id == privilege.id}" ng-click="selectPrivilege(privilege)">
                    <div>
                        <div class="title">
                            {{'IDM.PRIVILEGE-MGMT.' + privilege.name | translate}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>

<div class="main-content-wrapper">

    <div class="main-content" ng-show="!model.loadingPrivilege">

        <div class="header" ng-if="model.selectedPrivilege">

            <h2>
                <span>{{'IDM.PRIVILEGE-MGMT.' + model.selectedPrivilege.name | translate}}</span>
            </h2>

        </div>

        <div class="content" ng-show="model.selectedPrivilege" auto-height offset="70">
            <div style="margin-top:10px">

                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a data-target="#users" aria-controls="users" role="tab" data-toggle="tab">
                            {{'IDM.PRIVILEGE-MGMT.USERS' | translate}}
                        </a>
                    </li>
                    <li role="presentation">
                        <a data-target="#groups" aria-controls="groups" role="tab" data-toggle="tab">
                            {{'IDM.PRIVILEGE-MGMT.GROUPS' | translate}}
                        </a>
                    </li>
                </ul>

                <div class="tab-content" style="padding:10px">

                    <div role="tabpanel" class="tab-pane active" id="users">

                        <span class="action">
                            <a id="toggle-add-group-member"
                                    select-people-popover
                                    popover-title="IDM.PRIVILEGE-MGMT.POPOVER-SELECT-USER-TITLE"
                                    placement="bottom"
                                    on-people-selected="addUserPrivilege(user)"
                                    email-mode-disabled="true"
                                    type="'idm'"
                                    style="font-weight: normal">
                                    <span ng-if="!model.selectedPrivilege.users || model.selectedPrivilege.users.length == 0">
                                        {{'IDM.PRIVILEGE-MGMT.NO-USERS' | translate}}
                                    </span>
                                    <span ng-if="model.selectedPrivilege.users && model.selectedPrivilege.users.length != 0">
                                        {{'IDM.PRIVILEGE-MGMT.ADD-USER' | translate}}
                                    </span>     
                            </a>
                        </span>

                        <div class="section" ng-if="model.selectedPrivilege.users && model.selectedPrivilege.users.length != 0">

                            <table width="100%" class="users">
                                <tr>
                                    <th width="30%">{{'IDM.USER-MGMT.ID' | translate}}</th>
                                    <th width="30%">{{'IDM.USER-MGMT.EMAIL' | translate}}</th>
                                    <th width="30%%">{{'IDM.USER-MGMT.NAME' | translate}}</th>
                                    <th width="10%"></th>
                                </tr>
                                <tr ng-repeat="user in model.selectedPrivilege.users">
                                    <td>{{user.id}}</td>
                                    <td>{{user.email}}</td>
                                    <td>{{user.firstName}} {{user.lastName}}</td>
                                    <td align="center" ng-click="deleteUserPrivilege(user)"><i class="glyphicon glyphicon-trash"></i></td>
                                </tr>
                            </table>
                        </div>

                    </div>

                    <div role="tabpanel" class="tab-pane" id="groups">

                        <span class="action">
                            <a id="toggle-add-group-member"
                                    select-group-popover
                                    popover-title="IDM.PRIVILEGE-MGMT.POPOVER-SELECT-GROUP-TITLE"
                                    placement="bottom"
                                    on-group-selected="addGroupPrivilege(group)"
                                    email-mode-disabled="true"
                                    type="'idm'"
                                    style="font-weight: normal">
                                    <span ng-if="!model.selectedPrivilege.groups || model.selectedPrivilege.groups.length == 0">
                                        {{'IDM.PRIVILEGE-MGMT.NO-GROUPS' | translate}}
                                    </span>
                                    <span ng-if="model.selectedPrivilege.groups && model.selectedPrivilege.groups.length != 0">
                                        {{'IDM.PRIVILEGE-MGMT.ADD-GROUP' | translate}}
                                    </span>     
                            </a>
                        </span>

                        <div class="section" ng-if="model.selectedPrivilege.groups && model.selectedPrivilege.groups.length != 0">

                            <table width="100%" class="users">
                                <tr>
                                    <th width="30%">{{'IDM.PRIVILEGE-MGMT.GROUP-ID' | translate}}</th>
                                    <th width="30%%">{{'IDM.PRIVILEGE-MGMT.GROUP-NAME' | translate}}</th>
                                    <th width="10%"></th>
                                </tr>
                                <tr ng-repeat="group in model.selectedPrivilege.groups">
                                    <td>{{group.id}}</td>
                                    <td>{{group.name}}</td>
                                    <td align="center" ng-click="deleteGroupPrivilege(group)"><i class="glyphicon glyphicon-trash"></i></td>
                                </tr>
                            </table>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="nothing-to-see" ng-if="!model.selectedPrivilege">
            <span>{{'IDM.PRIVILEGE-MGMT.NO-SELECTION' | translate}}</span>
        </div>

    </div>

</div>